<!-- 通用头部 -->
<template>
	<view :style="{'height': headerHeight+'px'}">
		<view class="custom flex_center" :style="{'paddingTop': barHeight+'px'}">
			<view class="nav">
				<view class="nav-text">
					{{title}}
				</view>
				<view class="nav-text nav-desc">
					{{desc}} <text class="zh-desc siyuan-medium" v-if="pageName">{{pageName}}</text>
				</view>
			</view>
		</view>
		<view class="empty_custom" :style="{'paddingTop': barHeight+'px'}"></view>
	</view>
</template>

<script setup>
	import { useStore } from "vuex";
	import { ref,watch } from "vue";
	const store = useStore()
	const barHeight = ref(store.state.barHeight)
	const headerHeight = ref(store.state.headerHeight)
	const props = defineProps({
		title: {
			type: String,
			default: ">>BAC"
		},
		desc:{
			type: String,
			default:"BRITA ART COMMUNITY"
		},
		pageName:{
			type: String,
			default:""
		}
	})
</script>

<style scoped>
	@import "../../static/fonts.css";
	
	.custom {
	  position: fixed;
	  width: 100%;
	  top: 0;
	  left: 0;
	  /* height: 45px; */
	  z-index: 999;
	  padding-bottom: 10rpx;
	  background: #fff;
	}
	.nav{
	  float: left;
	  margin-left: 22rpx;
	  margin-top: 22rpx;
	  margin-right: 15rpx;
	  display: block;
	}
	.nav-text {
		display: block;
		font-family: "intelOneMono-medium";
		font-size: 24rpx;
		color: #000000;
		line-height: 26rpx;
	}
	.nav-desc {
		padding-left: 28rpx;
	}
</style>